<script setup lang='ts'>
import { watch, ref, inject } from 'vue'
import gsap from 'gsap';
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

// 接收centerShow
let centerShow = inject("centerShow", ref(false))
// 获取dom
const firearmsUl: any = ref(null)
const imgs: any = ref(null)

function setUlWidth() {
  console.log('liss数组', firearmsUl.value.children);
  let ulWidth: number = 0
  for (const element of firearmsUl.value.children) {
    ulWidth += element.offsetWidth;

  }
  firearmsUl.value.style.width = ulWidth + 'px'
}

function imgAn() {
  let x: number = firearmsUl.value.offsetWidth - imgs.value.offsetWidth
    // 整体渐入
  gsap.from(
    ".firearmsCenter", {
    y: 50,
    opacity: 0,
    duration: 1,
    scrollTrigger: {
      trigger: ".firearmsCenter",
      toggleActions: "play pause resume reset ",
    }
  })
  // 枪支图片
  gsap.to(
    ".firearmsUl", {
    x: -x,
    scrollTrigger: {
      pin: true,
      markers: false,
      trigger: ".firearms",
      start: "top top",
      end: "+=1500",
      scrub: 0.5,
    }
  })

}
watch(centerShow, (value) => {
  if (value) {
    setUlWidth()
    imgAn()
    console.log('value', value);

  }
})
</script>
<template>
  <div class="firearms">
    <div class="firearmsCenter">
      <div class="text">世界十大名枪</div>
      <div class="imgs" ref="imgs">
        <ul class="firearmsUl" ref="firearmsUl">
          <li>
            <img src="https://t12.baidu.com/it/fm=173&fmt=auto&h=188&img_JPEG=&s=C8822ED5180042CADA85A67503000077&u=3600899492%2C1084473586&w=300" alt="">
          </li>
          <li>
            <img src="https://t12.baidu.com/it/fm=173&fmt=auto&h=406&img_JPEG=&s=BD1EE15F7AE77E9687255CE70300E020&u=1778688488%2C3103170086&w=639" alt="">
          </li>
          <li>
            <img src="https://t11.baidu.com/it/fm=173&fmt=auto&h=238&img_JPEG=&s=8183B355545217CA0498952B03007043&u=1757881972%2C3761112198&w=300" alt="">
          </li>
          <li>
            <img src="https://t11.baidu.com/it/fm=173&fmt=auto&h=240&img_JPEG=&s=43BF3FC50E71E7D45801C1260300E043&u=1052672668%2C846756944&w=300" alt="">
          </li>
          <li>
            <img src="https://t11.baidu.com/it/fm=173&fmt=auto&h=130&img_JPEG=&s=5E868645725516731E388597030040AB&u=1507177657%2C2442984139&w=300" alt="">
          </li>
          <li>
            <img src="https://t11.baidu.com/it/fm=173&fmt=auto&h=208&img_JPEG=&s=88B2E512F4EA5B011D499CC60100E0A1&u=645489718%2C1756975576&w=313" alt="">
          </li>
          <li>
            <img src="https://t10.baidu.com/it/fm=173&fmt=auto&h=219&img_JPEG=&s=C0B23472F52A7F0116FC114E0200E030&u=932431284%2C3539219383&w=298" alt="">
          </li>
          <li>
            <img src="https://t11.baidu.com/it/fm=173&fmt=auto&h=225&img_JPEG=&s=8E5004DA82A006A216BDA855010080E3&u=2430928441%2C3124435436&w=300" alt="">
          </li>
          <li>
            <img src="https://t10.baidu.com/it/fm=173&fmt=auto&h=190&img_JPEG=&s=0A82762314A26AA12D18F1DF010080E2&u=4241262072%2C648711394&w=300" alt="">
          </li>
          <li>
            <img src="https://t10.baidu.com/it/fm=173&fmt=auto&h=191&img_JPEG=&s=0012749379B556969AF045DE0300D033&u=1007380482%2C3625193671&w=340" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.firearms {
  height: 100vh;
  background-color: black;
  padding-top: 38px;

  .text {
    font-weight: 700;
    font-size: 2.6vw;
    line-height: 1.41;
    text-align: center;
    color: white;
  }

  .imgs {
    margin: 30px auto;
    width: 80%;
    height: 200px;
    overflow: hidden;

    ul {
      height: 100%;
      display: flex;

    }

    ul li {
      flex-shrink: 0;
      height: 100%;

      img {
        object-fit: cover;
        height: 100%;
      }
    }
  }
}</style>